<template>
  <div>
    <p>
      子组件: {{ count }}
    </p>
  </div>
</template>

<script setup lang="ts">
import { onMounted, inject, onBeforeUnmount } from "vue"

const timer = inject('timer')
const count = inject('count')

onMounted(() => {
  // 切换子组件时, 定时器将不正常工作, 让我们来修复它 . 
  timer.value = window.setInterval(() => {
    count.value++
  }, 1000)
})

// 解决方法
onBeforeUnmount(() => {
  timer.value && clearInterval(timer.value)
})
</script>